<template>
  <div class="app">
    <h1>分页组件</h1>
    <Pager :total="total" :current="current" :visible-number="10" @pageChange="handlePageChange"></Pager>
    <Pager :total="1000" :current="7" :visible-number="11" @pageChange="handlePageChange"></Pager>
    <Pager :total="20" :current="3" :visible-number="5" :limit="5" @pageChange="handlePageChange"></Pager>
    <Pager :total="1000" :current="1" :visible-number="10" @pageChange="handlePageChange"></Pager>
    <Pager :total="1000" :current="99" :visible-number="10" @pageChange="handlePageChange"></Pager>
    <div class="icon-cont">
      <div class="item" v-for="(n, index) in icons" :key="index">
        <Icon :type="n"></Icon>
        <span>{{ n }}</span>
      </div>
    </div>
    <div class="empty-cont">
      <Empty/>
    </div>
    <div class="image-loader-cont">
      <ImageLoader 
        src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?fit=crop&crop=entropy&w=3456&h=2304" 
        placeholder="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?w=100"
        @load="handleLoad"
        ></ImageLoader>
    </div>
    <div class="contact-cont">
      <Contact></Contact>
    </div>
    <div class="menu-cont">
      <Menu></Menu>
    </div>
    <div class="site-aside">
      <SiteAside/>
    </div>


  </div>
</template>

<script>
import Pager from './components/Pager';
import Icon, { icons } from './components/Icon';
import Empty from './components/Empty';
import ImageLoader from './components/ImageLoader';
import Contact from './components/SiteAside/Contact';
import Menu from './components/SiteAside/Menu';
import SiteAside from './components/SiteAside';
export default {
  name: 'App',
  components: {
    Pager,
    Icon,
    Empty,
    ImageLoader,
    Contact,
    Menu,
    SiteAside
  },
  data() {
    return {
      total: 3020,
      current: 1,
      icons
    }
  },
  computed: {

  },
  methods: {
    handlePageChange(e) {
      console.log('处理抛出的事件');
      this.current = e
    },
    handleLoad() {
      console.log('ImageLoader组件load事件触发，图片加载完成')
    }
  },
}
</script>

<style lang="scss" scoped>
.app {
  height: 1000vh;
}
.icon-cont {
  width: 400px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  .item {
    display: flex;
    flex-direction: column;
  }
  .icon-container {
    font-size: 36px;
  }
}
.empty-cont {
  position: relative;
  margin: 30px auto;
  width: 500px;
  height: 200px;
  border: solid 1px;
}
.image-loader-cont {
  width: 480px;
  height: 320px;
  overflow: hidden;
  border: solid 1px;
  margin: 30px auto;
}
.contact-cont {
  padding: 20px;
  width: 340px;
  background-color: #202020;
  margin: 30px auto;
}
.menu-cont {
  padding: 20px;
  width: 340px;
  background-color: #202020;
  margin: 30px auto;
}
.site-aside {
  padding: 20px;
  width: 340px;
  background-color: #202020;
  margin: 30px auto;
}
</style>
